import React, { } from 'react';
import { View, Text, TextInput, TouchableOpacity } from 'react-native';

import SS, { color4 } from './styles';

export function Cell (props) {
  const { prefix, suffix, label, children, border = true, arrow = false } = props;

  const _prefix = prefix
    ? MayINeedHelp(prefix) ? (<Text style={SS.cell_prefix_txt}>{prefix}</Text>) : prefix
    : (<Text style={SS.cell_prefix_txt}>{label}</Text>);

  const _layout = MayINeedHelp(children) ? (<Text style={SS.cell_layout_box_t}>{children}</Text>) : children;

  const _suffix = suffix || arrow ? (<View style={SS.cell_suffix_ico} />) : null;

  return (
    <View style={{ ...SS.cell, borderBottomWidth: border ? 1 : 0 }}>
      <View style={SS.cell_prefix}>{_prefix}</View>
      <View style={SS.cell_layout}>
        <View style={SS.cell_layout_box}>{_layout}</View>
      </View>
      <View style={SS.cell_suffix}>{_suffix}</View>
    </View>
  );
}

export function PhoneCell (props) {
  const { label } = props;
  const prefix = (
    <View style={SS.pcell_prefix}>
      <View><Text style={SS.pcell_prefix_txt}>{label}</Text></View>
      <View style={SS.pcell_prefix_ico} />
    </View>
  );
  return (
    <Cell prefix={prefix}>
      <TextInput style={{ flexGrow: 1 }} placeholder={global.lang.login.phoneplaceholder} />
    </Cell>
  );
}

export function MayINeedHelp (element) {
  return !element || (element.$$typeof !== Symbol.for('react.element') && !Array.isArray(element));
}

export function FootView (props) {
  const { style = {}, children, color = color4, textStyle = {}, onPress, disabled = false } = props;
  const _children = MayINeedHelp(children)
    ? (<Text style={{ ...textStyle, color }}>{children}</Text>)
    : children;

  return (
    <TouchableOpacity style={{ ...SS.FootView, ...style }} onPress={onPress} disabled={disabled} activeOpacity={0.618}>
      {_children}
    </TouchableOpacity>
  );
}